<template>
    <section class="collect_server_from overflowYAll">
		<!-- 采集服务发布 -->
		<el-form ref="form" :model="form" :rules="rules" label-width="106px"  v-loading="loading">
			<el-form-item label="服务名称 " prop="name">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
				
			<el-form-item label="服务标识 ">
				<span>由系统自动生成</span>
			</el-form-item>

			<el-form-item label="服务方选择" prop="producerId"  reuqired >
				<el-select v-model="form.producerId" filterable placeholder="请选择(可直接搜索)">
					<el-option v-for="(item,index) in fuwuName" 
						:key="index" 
						:label="item.name" 
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
				
			<el-form-item label="资源所在网段" required>
				<el-radio-group v-model="form.segmentId" @change ="chooseResource" >
					<el-radio v-for="(item,index) in treeSeach.segment" 
						:label="item.id" 
						:key="index" >
						{{item.name}}
					</el-radio>
				</el-radio-group>
			</el-form-item>
					
			<!--业务类型，信息类型多选-->
			<yw-info-desc-form 
				:yewuType="treeSeach.business_type"
				:infoType="treeSeach.info_type"
				:timeSubmit="ywInfoDescTimeOut"
				@outPutForm = "ywInfoDescOutPutForm"
				>
			</yw-info-desc-form>
			
			<el-form-item label="运行计划">
				<el-radio-group v-model="collectServerFrom.yunxingPlane" @change="changeYunxingPlane">
					<el-radio-button class="box-radio" label="1">分钟</el-radio-button>
					<el-radio-button class="box-radio" label="2">小时</el-radio-button>
					<el-radio-button class="box-radio"  label="3">日</el-radio-button>
					<el-radio-button class="box-radio"  label="4">周</el-radio-button>
					<el-radio-button class="box-radio"  label="5">月</el-radio-button>
				</el-radio-group>
			</el-form-item>
			
			<yunxing-plane 
				@outPutForm = "yunxingPlaneOutPutForm"
				:timeSubmit = "yunxingPlaneTimeOut" 
				:showYunxingPlane="showYunxingPlane">
			</yunxing-plane><!--运行计划-->
			
			<!-- <el-form-item label="异常处理">
				<el-radio v-model="form.isRestart" label="1">自动重启</el-radio>
			</el-form-item> -->
			
			<el-form-item label="发布区域(单选)">
				<el-radio-group v-model="form.nodeIds" @change="changefbArea">
					<el-radio-button class="box-radio" 
						v-for="(item,index) in fabuAreaRadio" 
						:label="index" 
						:name = "item.name"
						:key="index"  >
						{{item.name}}
					</el-radio-button>
				</el-radio-group>
				
				<div class="" style="margin-top: 15px;" v-if="fabuAreaRadio.length!=0">
					<p>CPU  剩余 {{fabuAreaRadio[choosedFbArea].cpuNum}}核分配  <el-input  v-model="form.cpuNum" style="width: 150px;"></el-input>核</p>
					<p>内存  剩余 {{fabuAreaRadio[choosedFbArea].memory}}G分配  <el-input  v-model="form.memory" style="width: 150px;"></el-input>G</p>
				</div>
			</el-form-item>
					
			<!--这里开始是secondForm2-->
			<el-form-item label="数据来源">
				<el-col :span="5">
				<el-radio-group v-model="form.inServiceDataSource.type" @change="changeFBjiedian">
					<el-radio-button class="box-radio" label="2">文件</el-radio-button>
					<el-radio-button class="box-radio"  label="3">数据库</el-radio-button>
				</el-radio-group>
				</el-col>
				<el-col :span="1">
					<el-tooltip  effect="dark" content="一些系统常量 ${yyyymmdd}：当天 ${yyyymmdd+N}：当天+N天 ${yyyymmdd-N}：当天-N天" placement="top">
      			<i class="el-icon-question" ></i>
    			</el-tooltip>
				</el-col>
			</el-form-item>
			
			<!--文件的form-->
			<wenjian-form 
				:resourceWeb= "resourceWeb"
				@outPutForm="wenjianOutPutFormSecondForm"
				:timeSubmit="wenJianTimeOutSecondForm"
				v-show="secondForm==='2'" 
				:inputOrOutput='laiyuan' >
			</wenjian-form>
			
			<!--数据库的form-->
			<datadb-form  
				@outPutForm="dbtadbOutPutFormSecondForm"
				@outPutdatadbForm="outPutdatadbForm"
				@sourceField="sourceFieldEvent"
				@InGentableSql="InGentableSql"
				:timeSubmit="dbtadbTimeOutSecondForm"
				:inViewSQLSubmitButton="inViewSQLSubmitButton"
				:resourceWeb= "resourceWeb"
				:tableDataName="secondFormDataName"
				v-show="secondForm==='3'" 
				:inputOrOutput='laiyuan'>
			</datadb-form>
					
			<!--***************这里开始是thirdForm***************************-->
			<el-form-item label="数据目的地" style="margin-top: 25px;">
				<el-col :span="5">
					<el-radio-group v-model="form.outServiceDataSource.type" @change="changeDataMudi">
						<el-radio-button class="box-radio" label="2">文件</el-radio-button>
						<el-radio-button class="box-radio"  label="3">数据库</el-radio-button>
					</el-radio-group>
				</el-col>
				<el-col :span="1">
					<el-tooltip  effect="dark" content="一些系统常量 ${yyyymmdd}：当天 ${yyyymmdd+N}：当天+N天 ${yyyymmdd-N}：当天-N天" placement="top">
      			<i class="el-icon-question" ></i>
    			</el-tooltip>
				</el-col>
			</el-form-item>
			
			<!--文件的form-->
			<wenjian-form 
				:timeSubmit="wenJianTimeOutThirdForm"
				@outPutForm="wenjianOutPutFormThirdForm"
				:resourceWeb= "resourceWeb2"
				v-show="thirdForm==='2'" 
				:inputOrOutput='mudi'>
			</wenjian-form>
			
			<!--目的地的数据库form-->
			<!-- <datadb-form  
				:timeSubmit="dbtadbTimeOutThirdForm"
				@outPutForm="dbtadbOutPutFormThirdForm"
				:resourceWeb= "resourceWeb2"
				:tableDataName="thirdFormDataName"
				v-show="thirdForm==='3'" 
				:inputOrOutput='mudi'>
			</datadb-form> -->
			<destination-data
				:timeSubmit="dbtadbTimeOutThirdForm"
				:resourceWeb="resourceWeb2"
				:sourceField="sourceField"
				v-show="thirdForm==='3'"
				@outPutForm="dbtadbOutPutFormThirdForm"
				@viewSQLSubmitButton="viewSQLSubmitButton">
			</destination-data>
		</el-form>
			
		<p class="fixed_button">
			<el-button type="primary" @click="goBack">取消</el-button>
			<el-button type="primary" @click="pushForm">提交</el-button>
		</p>
    </section>
</template>

<script>
	import yunxingPlane from "./components/yunxingPlane"
	import wenjianForm from "./components/collectWenjian"
	import datadbForm from "./components/collectDbdata"
	import destinationData from "./components/destinationData"
	import ywInfoDescForm from "../common/yw_info_desc"
	import {
		componentGetYwType,
		componentServerRegisterGetFabuArea,
		componentServerRegisterGetFabuAreaCollect,
		componentCollectFormPush,
		componentCollectAll,
		computedCheckName,
		componentSearchName,
		computedGentableSql,
	} from "../common/js_css_img/serverResourceComputed"
	export default {
		components:{
			yunxingPlane,
			wenjianForm,
			datadbForm,
			ywInfoDescForm,
			destinationData,
		},
		data() {
			var checkName = (rule,value,callback)=>{
				if (!value) {
					return callback(new Error('名字不能为空'));
				}
				computedCheckName(this,value,'','cjfw');
				setTimeout(()=>{
					if(this.has){
						return callback(new Error('名称已存在，请重新输入'));
					}else {
						callback();  //必须要有回调，要不然表单无法提交
					}
				},1500)
			};
			return {
				has:false,
				loading:false,
				dbtadbTimeOutSecondForm:false,/*第二个数据库表单*/
				dbtadbTimeOutThirdForm:false,/*第三个数据库表单*/
				wenJianTimeOutSecondForm:false,/*第二个文件表单*/
				wenJianTimeOutThirdForm:false,/*第三个文件表单*/
				yunxingPlaneTimeOut:false,
				ywInfoDescTimeOut:false,
				resourceWeb:0,/*选中的资源网段*/
				resourceWeb2:0,/*选中的区域所对应的资源网段*/
				choosedFbArea:0,
				yewuType:[],
				infoType:[],
				fabuAreaRadio:[],
				mudi:'mudi',
				formLabel:[{options:[]}],
				laiyuan:"laiyuan",
				thirdForm:'2',
				secondForm:'2',
				showYunxingPlane:6,
				fuwuName: [],
				secondFormDataName: "对应元数据",
				thirdFormDataName: "对应来源字段",
				sourceField: [],	//来源字段列表
				inViewSQLSubmitButton: false,	//来源字段触发器
				viewSQLFatherDataSourceObj: {},	//来源和目的数据源对像总集合（查看建表SQL用，直接放到api用）
				form:{
					"name":"",
					"segmentId":'',
					"type":'1',
					"producerId":"",
					"businessType":"",
					"infoType":"",
					"describe": "",
					"nodeIds":"",
					// "isRestart":'',
					"smRunPlan":{},
					"memory":'',
					"cpuNum":'',
					"inServiceDataSource":{ 
						"type":'2',
						"connDatasourceId":'',
						"filePath":"",
						"fileName":"文件",
						"sql":'',
						"outputDataFormList":[
						],
					},
					"specifyFileType":'',
					"specifyValue":"",
					"gatherMode":'',
					"columnName": "",
					"sqlWhere": "",
					"outFileType":"",
					"outServiceDataSource":{
						"type":'',
						"connDatasourceId":'',
						"fileSaveNameRule":"",
						"filePath":"",
						"fileName":"gg",
						"inputDataFormList":[ 
						],
					},
				},
				collectServerFrom:{
					cpu:"",
					memory:"",
					name:'',
					fuwuType:'',
					yewuType:[],
					infoType:[],
					desc:'',
					yunxingPlane:'',
					stratTime:"",
					jiangeHours:"",
					endTime:'',
					yichang:'',
					fbJieDian:'',
				},
				fuwuTypeFileButton:false,
				yewuType:[
				],
				infoType:[
				],
				treeSeach:{
					segment:[],/*网段类型*/
					info_type:[],/*信息类型*/
					business_type:[],/*业务类型*/
				},
				rules:{
					name:[
						{ required: true, message: '请输入名称', trigger: 'blur' },
						{ validator: checkName, trigger: 'blur' }
					]
				}
			};
		},
		methods: {
			goBack(){
				this.$emit('goBack');
			},
			pushForm(){/*提交表单*/
				if(this.has){
					this.$message.error('请检查名称')
					return false;
				}
				// this.loading =true;
				this.form.nodeIds = this.fabuAreaRadio[this.choosedFbArea].id;
				this.ywInfoDescTimeOut=!this.ywInfoDescTimeOut;
			},
			upload(){
				
			},
			changeYunxingPlane(val){
				this.showYunxingPlane = val;
			},
			changeFBjiedian(val){
				this.secondForm = val;
			},
			upload(val){
				document.getElementById(val).click();
			},
			changeDataMudi(val){
				this.thirdForm = val;
			},
			changefbArea(val){/*选择发布区域*/
				val = parseInt(val);
				this.choosedFbArea = val;
				this.resourceWeb2 = parseInt(this.fabuAreaRadio[val].segment) 
			},
			ywInfoDescOutPutForm(val){/*业务选择，信息选择，描述*/
				this.form.businessType =val.businessType;
				this.form.infoType =val.infoType;
				this.form.describe =val.describe;
				this.yunxingPlaneTimeOut=!this.yunxingPlaneTimeOut;
			},
			yunxingPlaneOutPutForm(val){/*运行计划的表单*/
				this.form.smRunPlan = val;
				if(this.secondForm==='2'){
					this.wenJianTimeOutSecondForm=!this.wenJianTimeOutSecondForm;
				}else if (this.secondForm==='3'){
					this.dbtadbTimeOutSecondForm = !this.dbtadbTimeOutSecondForm;
				}
			},
			dbtadbOutPutFormSecondForm(val){/*第二个数据库表单触发的事件*/
				this.form.inServiceDataSource = val;

				if(this.thirdForm==='2'){
					this.wenJianTimeOutThirdForm=!this.wenJianTimeOutThirdForm;
				}else if (this.thirdForm==='3'){
					this.dbtadbTimeOutThirdForm = !this.dbtadbTimeOutThirdForm;
				}
			},
			outPutdatadbForm(val){
				this.form.gatherMode = val.gatherMode;
				this.form.columnName = val.columnName;
				this.form.sqlWhere = val.sqlWhere;
			},
			sourceFieldEvent(val){	//来源字段列表
				this.sourceField = val;
			},
			dbtadbOutPutFormThirdForm(val){/*/*第三个数据库表单触发的事件*/
				this.form.outServiceDataSource = val;
				console.log(this.form);
				console.log("444")
				componentCollectFormPush(this);
			},
			wenjianOutPutFormSecondForm(val){/*第二个文件表单触发的事件*/
				this.form.specifyValue=val.secondForm.specifyValue;
				this.form.gatherMode=val.secondForm.gatherMode;
				this.form.specifyFileType=val.secondForm.specifyFileType;
				this.form.inServiceDataSource = val.form;
				
				if(this.thirdForm==='2'){
					this.wenJianTimeOutThirdForm=!this.wenJianTimeOutThirdForm;
				}else if (this.thirdForm==='3'){
					this.dbtadbTimeOutThirdForm = !this.dbtadbTimeOutThirdForm;
				}
			},
			wenjianOutPutFormThirdForm(val){/*第三个文件表单触发的事件*/
				this.form.outFileType = val.secondForm.outFileType;
				this.form.outServiceDataSource = val.form;
				componentCollectFormPush(this);
			},
			getYwType(){/*获取三种类型的数据*/
				componentGetYwType(this,'');
				componentCollectAll(this);
			},
			chooseResource(val){/*选中资源网段*/
				val = parseInt(val);
				this.resourceWeb = val;
				this.choosedFbArea = 0;
				componentServerRegisterGetFabuAreaCollect(this,val);
			},
			reset(){
				Object.assign(this.$data, this.$options.data())/*重置data数据*/
			},
			viewSQLSubmitButton(val){
				this.inViewSQLSubmitButton = !this.inViewSQLSubmitButton;
				this.viewSQLFatherDataSourceObj.outConnId = val.outConnId;
				this.viewSQLFatherDataSourceObj.outTableName = val.outTableName;
				this.viewSQLFatherDataSourceObj.inputDataFormList = val.inputDataFormList;
				console.log(this.viewSQLFatherDataSourceObj);
			},
			InGentableSql(val){
				this.viewSQLFatherDataSourceObj.inConnDatasourceTableId = val.inConnDatasourceTableId;
				this.viewSQLFatherDataSourceObj.outputDataFormList = val.outputDataFormList;
				computedGentableSql(this,this.viewSQLFatherDataSourceObj);	//总查询新建SQL
			},
		},
		mounted(){
			this.getYwType();
				componentSearchName(this,{pageAble:false,type:1});
		},
		
	};
</script>

<style>
	.collect_server_from .title{
    	height: 30px;
	    border-bottom: dashed 1px #afa4a4;
	    line-height: 20px;
	    font-size: 15px;
	    margin-bottom: 20px;
    }
    .collect_server_from .title span{
    	cursor: pointer;
    	color: #5A8BFF;
    }
    .collect_server_from .title .el-icon-back{
    	margin-right: 15px;
    }
    .collect_server_from  .box_checkbox{
    	margin: 5px !important;
    }
    .collect_server_from  .box_checkbox .el-checkbox-button__inner{
    	border:  1px solid #dcdfe6;
    }
    
   .collect_server_from  .el-checkbox-button.is-checked .el-checkbox-button__inner{
	   	color: #fff;
	    background-color: #409eff;
	    border-color: #409eff;
	    box-shadow: -1px 0 0 0 #8cc5ff;
   }
   .collect_server_from .second_form {
    background: #f5f5f5;
    padding: 20px;
	}
</style>